import '../css/my.css'
import { ActionSheet } from '@nutui/nutui-react'
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'



function Address() {
    const navigate = useNavigate()
    const [isVisible, setIsVisible] = useState(false)
    const [address, setAddress] = useState(localStorage.getItem('endAddress') || '河北省保定市莲池区北苑小区1号楼1单元101室')
    const daohanClick = () => {
        localStorage.setItem('endAddress', address)
        navigate('/test')
    }
    return (<>
        <div className='dituBox'>
            <div className='huanse'>
                <h4>我的当前位置</h4>
                <h4>切换位置</h4>
            </div>
            <div className='diliweizhi'>
                <h3>{address.slice(0,9)}</h3>
                <div style={{display:'flex',marginTop:'5px'}}>
                    <div style={{flex:1}}>
                        <p><img src='/iconfont/my/team-line.png' width={25} /><span style={{marginLeft:'10px'}}>2.8万人来过</span></p>
                    </div>
                    <div style={{flex:1}}>
                        <p><img src='/iconfont/my/dianzan.png' width={25} /><span style={{marginLeft:'10px'}}>17.2万点赞</span></p>
                    </div>
                </div>
                <div style={{marginTop:'5px'}}>
                    <p>门店地址：{address}</p>
                </div>
                <div className='btnBox'>
                    <div>
                        <button onClick={() => setIsVisible(true)} style={{border:'2px solid red',color:'red'}} className='btnAND'>电话联系门店</button>
                    </div>
                    <div>
                        <button  className='btnAND' onClick={()=>daohanClick()}>导航去门店</button>
                    </div>
                </div>
            </div>
        </div>
        <ActionSheet
        visible={isVisible}
        cancelText="取消"
        onSelect={() => {
          setIsVisible(false)
        }}
        onCancel={() => setIsVisible(false)}
      >
        <div style={{ textAlign: 'left', padding: '10px 20px',textAlign:'center' }}>176-8888-8888</div>
        <div style={{ textAlign: 'left', padding: '10px 20px',textAlign:'center' }}>呼叫</div>
      </ActionSheet>
    </>)
}

export default Address;